<script lang="ts" context="module">
  import type {PopupDirection} from "./conf"
  import ClickOutsideWrapper from '@component/ClickOutsideWrapper.svelte';
</script>
<script lang="ts">
  import { onMount } from 'svelte';
  export let buttonText: string = "";
  export let direction: PopupDirection = "lt";

  export let left = 0;
  export let top = 0;
  export let right = 0;
  export let bottom = 0;

  let elWrapper: HTMLElement;
  let elButton: HTMLButtonElement;
  let elContent: HTMLElement;
  let toggled = false;
  let pos: DOMRect;
  onMount(() => {
    window.setTimeout(() => {
      pos = elButton.getBoundingClientRect();
    }, 1000);
  })

  $: needLeft = direction.includes("l");
  $: needTop = direction.includes("t");
  $: needRight = direction.includes("r");
  $: needBottom = direction.includes("b");

	$: innerWidth = 0
	$: innerHeight = 0
  

  let xleft = 0;
  let xtop = 0;
  let xright = 0;
  let xbottom =0;

  $: {
    switch (direction) {
      case "lt":
        xleft = pos?.left + left;
        xtop = pos?.top + pos?.height + top;
        break;
      case "lb":
        xleft = pos?.left + left;
        xbottom = pos?.bottom - pos?.height - bottom;
        break;
      case "rt":
        xright = innerWidth - pos?.right - right;
        xtop = pos?.top + pos?.height + top;
        console.log('--rt--', innerWidth - xright, xtop)
        break;
      case "rb":
        xright = innerWidth - pos?.right - right;
        xbottom = pos?.bottom - pos?.height - bottom;
        break;
    }
    if (elContent) {
      const contentPos = elContent.getBoundingClientRect();
      let contentWidth = contentPos.width;
      let contentHeight = contentPos.height;

      if (xleft + contentWidth > innerWidth) {
        xleft = innerWidth - contentWidth;
      }
      if (xtop + contentHeight > innerHeight) {
        xtop = innerHeight - contentHeight;
      }
    }
  }

  function toggleDropdown () {
    toggled = !toggled;
  }
  function closeDropdown () {
    toggled = false;
  }
</script>
<svelte:window bind:innerWidth bind:innerHeight />
<ClickOutsideWrapper on:clickoutside={closeDropdown} exclude={[elWrapper]}>
  <div class="flex-container flex-row w-full" bind:this={elWrapper}>
    <div class="relative inline-block w-full">
      <!-- Dropdown toggle button -->
      <button bind:this={elButton} class="dd-button whitespace-nowrap" on:click={toggleDropdown}>
        <div class="flex-auto pl-2" ><slot name="button-content">{buttonText}</slot></div>
        <svg class="w-5 h-5 mx-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 15.713L18.01 9.70299L16.597 8.28799L12 12.888L7.40399 8.28799L5.98999 9.70199L12 15.713Z" fill="currentColor"></path>
        </svg>
      </button>
      <!-- Dropdown menu -->
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div bind:this={elContent} on:click={closeDropdown} class="dd-content visible" class:invisible={!toggled}
          style:left={needLeft ? `${xleft}px` : null} 
          style:right={needRight ? `${xright}px` : null} 
          style:top={needTop ? `${xtop}px` : null} 
          style:bottom={needBottom ? `${xbottom}px` : null} 
        >
          <slot></slot>
        </div>
    </div>
  </div>
</ClickOutsideWrapper>
<style lang="postcss">
  :root {
    --dd-height: 32;
    --dd-width: auto;
    --dd-content-width: 320;
    --dd-content-height: 100%;
    --dd-border-color: #66b851;
    --dd-border-width: 1px;
  }
  .dd-button {
    @apply z-10 flex flex-row justify-center items-center border w-full;
    /* width: var(--dd-width, 100%); */
    height: calc(var(--dd-height) * 1px);
    border-color: var(--dd-border-color);
    border-width: var(--dd-border-width);
  }
  .dd-content {
    @apply fixed z-20 w-56 py-2 mt-2 overflow-hidden rounded-md shadow-xl bg-gray-800 overflow-y-auto;
    width: calc(var(--dd-content-width) * 1px);
    height: calc(var(--dd-content-height) * 1px);
  }
  :global(.ddb-item) {
    @apply flex items-center p-3 text-sm capitalize transition-colors duration-200 transform text-gray-300 overflow-hidden cursor-pointer;
  }
  :global(.ddb-item:hover) {
    @apply bg-gray-700 text-white;
  }
</style>